import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Form, Select } from 'antd'
const Option = Select.Option;

import travelService from 'containers/request/travel-request/travel.service'
import debounce from 'lodash.debounce';
import 'styles/request/new-request/new-ven-master.scss'

class NewDestination extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.mode === 'multiple' ? [] : '',
      destinationOptions: [],
    };
    this.handleChange = debounce(this.handleChange, 250);
    this.handleSearchCity = debounce(this.handleSearchCity, 500);
  }

  componentDidMount() {
    const { value, mode } = this.props;
    this.setState({ value: mode === 'multiple' ? (value ? value.split(',') : []) : value });
  }

  handleChange = (value) => {
    const { language } = this.props;
    this.setState({ value });
    this.onChange(value);
    value && travelService.searchCitiesV2('standard', value, 'all', language.code === 'zh_cn' ? 'zh_cn' : 'en').then(res => {
      let result = [];
      res.data && res.data.map(item => {
        result.push(item.adName);
      });
      this.setState({ destinationOptions: result });
    })
  };

  handleSearchCity = (keyword) => {
    const { language } = this.props;
    travelService.searchCitiesV2('standard', keyword,  'all', language.code === 'zh_cn' ? 'zh_cn' : 'en').then(res => {
      let result = [];
      res.data && res.data.map(item => {
        result.push(item.adName);
      });
      this.setState({ destinationOptions: result });
    });
  };

  handleSelectMultCity = (value) => {
    this.setState({ value });
    this.onChange(value);
  };

  onChange = (changedValue) => {
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  };

  render() {
    const { value, destinationOptions } = this.state;
    const { mode, placeholder } = this.props;
    return (
      <div className="new-destination">
        {mode === 'multiple' && (
          <Select placeholder={placeholder}
                  mode="multiple"
                  value={value}
                  filterOption={false}
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  onChange={(values) => this.handleSelectMultCity(values)}
                  onSearch={(keyword) => this.handleSearchCity(keyword)}>
            {destinationOptions.map(option => {
              return <Option value={option} key={option}>{option}</Option>
            })}
          </Select>
        )}
        {mode !== 'multiple' && (
          <Select placeholder={placeholder}
                  mode="combobox"
                  value={value}
                  showArrow={false}
                  filterOption={false}
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  defaultActiveFirstOption={false}
                  onChange={this.handleChange}>
            {destinationOptions.map(option => {
              return <Option value={option} key={option}>{option}</Option>
            })}
          </Select>
        )}
      </div>
    )
  }
}

NewDestination.propTypes = {
  value: React.PropTypes.any,
  mode: React.PropTypes.string,
  placeholder: React.PropTypes.string
};

NewDestination.defaultProps = {
  value: '',
  mode: '',
  placeholder: ''
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

const wrappedNewDestination = Form.create()(NewDestination);

export default connect(mapStateToProps)(wrappedNewDestination)
